<template>
  <view class="about-time">
    <view class="wrap">
      <CustomHeader />
      <view class="content">
        <view class="banner h-590">
          <image
            class="w-100p h-100p"
            src="/src/static/image/banner-phone.jpg"
            mode="aspectFill"
          ></image>
        </view>
        <view class="part p2 content-1">
          <view class="title bg2 p-t-50 p-b-50">
            <view class="h2"> 时光新影教育 </view>
            <view class="p">
              运用科技和实战，做好影视人才和行业之间的桥梁,实现梦想!
            </view>
          </view>
          <view class="main">
            <image
              class="w-100p"
              src="/src/static/image/t1.jpg"
              mode="widthFix"
            ></image>
            <view class="jies">
              时光新影教育是国内专业品牌实训机构,采用案例式教学、项目化实战和公司化管理模式，首创专业技术和职业素养相融合的全新人才培养方案，结合时光坐标影视传媒股份有限公司十余年的影视剧项目制作经验积淀和庞大的服务体系与技术支持，为合作院校和影视爱好者提供涵盖影视全流程的拍摄、剪辑、合成、调色、栏目包装、三维动画、模型、特效等多种专业方向的实战型专业人才实训服务。
            </view>
          </view>
        </view>
        <view class="part p1 content-2">
          <view class="title bg2 p-t-50 p-b-50">
            <view class="h2"> 了解时光新影教育 </view>
            <view class="p">
              运用科技和实战，做好影视人才和行业之间的桥梁,实现梦想!
            </view>
          </view>
          <view class="main">
            <view class="line line-1 flex-between-center">
              <image
                class="w-49p"
                src="/src/static/image/three.png"
                mode="widthFix"
              ></image>
              <image
                class="w-49p"
                src="/src/static/image/three2.png"
                mode="widthFix"
              ></image>
            </view>
            <view class="line line-1 flex-between-center m-t-15">
              <image
                class="w-49p"
                src="/src/static/image/three3.png"
                mode="widthFix"
              ></image>
              <image
                class="w-49p"
                src="/src/static/image/three4.png"
                mode="widthFix"
              ></image>
            </view>
          </view>
        </view>
        <view class="part p7 content-3">
          <view class="title bg7 p-t-50 p-b-50">
            <view class="h2"> 学院环境 </view>
            <view class="p"> 高端教学环境，造就优质人才 </view>
          </view>
          <view class="main">
            <image
              class="w-100p"
              src="/src/static/image/huan.jpg"
              mode="widthFix"
            ></image>
          </view>
        </view>
        <view class="part p7 content-4">
          <view class="title bg7 p-t-50 p-b-50">
            <view class="h2"> 合作校企 </view>
            <view class="p"> 近百家高校的信任 千余家合作企业的选择 </view>
          </view>
          <view class="main">
            <image
              class="w-100p"
              src="/src/static/image/gs.png"
              mode="widthFix"
            ></image>
          </view>
        </view>
        <view class="part p2 p1 content-5">
          <view class="title bg2 p-t-50 p-b-50">
            <view class="h2"> 荣誉无数 见证实力 </view>
            <view class="p"> 成为深受信赖的教育机构 </view>
          </view>
          <view class="main">
            <view class="ul flex-between-center">
              <image
                class="li li1"
                src="/src/static/image/2.jpg"
                mode="aspectFill"
              ></image>
              <image
                class="li li2"
                src="/src/static/image/3.jpg"
                mode="aspectFill"
              ></image>
              <image
                class="li li3"
                src="/src/static/image/4.jpg"
                mode="aspectFill"
              ></image>
            </view>
            <view class="ul flex-between-center m-t-15">
              <image
                class="li li1"
                src="/src/static/image/6.jpg"
                mode="aspectFill"
              ></image>
              <image
                class="li li2"
                src="/src/static/image/7.jpg"
                mode="aspectFill"
              ></image>
              <image
                class="li li3"
                src="/src/static/image/8.png"
                mode="aspectFill"
              ></image>
            </view>
          </view>
        </view>
        <view class="part p8 content-6">
          <view class="title bg8 p-t-50 p-b-70">
            <view class="h2"> 联系我们 </view>
          </view>
          <view class="main">
            <image
              class="w-100p"
              src="/src/static/image/t1.jpg"
              mode="widthFix"
            ></image>
            <view class="jies m-b-50">
              · 免费咨询热线：400-118-1098
              <br />
              · 官方微信公众号：时光新影教育
              <br />
              · 官方微信公众号：时光新影教育
              <br />
              · 对公账户：杭州新影科技有限公司
              <br />
              · 对公账号：3301 0401 6000 1241 978
              <br />
              · 开户行：杭州银行文创支行
              <br />
              · 学院地址：杭州市西湖区转塘街道创意路1号凤凰创意国际4号楼1单元3楼
            </view>
            <view class="ul">
              <view class="li">
                <view class="h2"> 杭州站（城站） </view>
                <view class="p">
                  乘坐地铁1号线至江陵路换乘6号线至霞鸣街站D口，步行至创意路1号
                </view>
              </view>
              <view class="li">
                <view class="h2"> 杭州东站 </view>
                <view class="p">
                  乘坐地铁1号线至中医药大学站换乘6号线至霞鸣街站D口，步行至创意路1号
                </view>
              </view>
              <view class="li">
                <view class="h2"> 汽车南站 </view>
                <view class="p">
                  地铁4号线甬江路至中医药大学站换乘6号线至霞鸣街站D口，步行至创意路1号
                </view>
              </view>
              <view class="li">
                <view class="h2"> 杭州萧山机场 </view>
                <view class="p">
                  乘坐地铁7号线萧山机场地铁站至奥体中心换乘6号线至霞鸣街站D口，步行至创意路1号
                </view>
              </view>
              <view class="li">
                <view class="h2"> 驾车 </view>
                <view class="p">
                  杭州市西湖区转塘街道创意路1号凤凰创意国际4号楼1单元3楼
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="part p9 content-7">
          <view class="title bg2 p-t-50 p-b-70">
            <view class="h2"> 时光大事记 </view>
          </view>
          <view class="main">
            <view class="box">
              <view class="color-white f-40 lh-normal"> 2004 </view>
              <view class="m-b-30 f-30" style="color: #a7a7a7">
                光影逐梦，我们从这里出发——时光坐标于2004年正式成立
              </view>
            </view>
            <view class="box add-line">
              <view class="color-white f-40 lh-normal"> 2011 </view>
              <view class="m-b-30 f-30" style="color: #a7a7a7">
                时光坐标教育杭州总公司成立，旨在为视效行业培养和输送影视后期制作、剪辑、合成、特效以及三维影视动画等方向的数字媒体专业领域高端人才
              </view>
            </view>
            <view class="box add-line">
              <view class="color-white f-40 lh-normal"> 2012 </view>
              <view class="m-b-30 f-30" style="color: #a7a7a7">
                时光教育获得浙江省诚信优秀品牌教育培训机构
              </view>
            </view>
            <view class="box add-line">
              <view class="color-white f-40 lh-normal"> 2014 </view>
              <view class="color-white f-30 lh-normal"> 2月 </view>
              <view class="m-b-30 f-30" style="color: #a7a7a7">
                时光坐标教育山东分公司成立
              </view>
              <view class="color-white f-30 lh-normal"> 8月28日 </view>
              <view class="m-b-30 f-30" style="color: #a7a7a7">
                时光教育学员安丽娜荣获第7届中国影视数码剪辑大赛优秀奖
              </view>
            </view>
            <view class="box add-line">
              <view class="color-white f-40 lh-normal"> 2015 </view>
              <view class="m-b-30 f-30" style="color: #a7a7a7">
                时光坐标《烈日灼心》电影VFX镜头入选Foundry Nuke 2015作品
              </view>
            </view>
            <view class="box add-line">
              <view class="color-white f-40 lh-normal"> 2016 </view>
              <view class="color-white f-30 lh-normal"> 9月4日 </view>
              <view class="m-b-30 f-30" style="color: #a7a7a7">
                杭州G20峰会开幕式文艺演出《美丽的爱情传说》
              </view>
              <view class="color-white f-30 lh-normal"> 9月21日 </view>
              <view class="m-b-30 f-30" style="color: #a7a7a7">
                时光坐标集团于新三板正式挂牌
              </view>
            </view>
            <view class="box add-line">
              <view class="color-white f-40 lh-normal"> 2021 </view>
              <view class="color-white f-30 lh-normal"> 5月19日 </view>
              <view class="m-b-30 f-30" style="color: #a7a7a7">
                启动“1+X”数字影视特效制作职业技能登记证书 试点工作线上说明会
              </view>
            </view>
          </view>
        </view>
        <view class="bottom">
          <view class="biao h-630">
            <view class="title bg8 p-t-50 p-b-70">
              <view class="h2"> 每个时代都在悄悄犒赏努力学习的人 </view>
            </view>
            <form class="diyform">
              <input type="text" placeholder="姓名：" />
              <input type="text" placeholder="电话：" />
              <view class="link"> 获取免费试听名额 </view>
            </form>
          </view>
        </view>
      </view>
    </view>
    <view class="mobile_minchat_div">
      <view class="service">
        <view class="logo">
          <image
            class="img w-100p h-100p"
            src="/static/image/server.png"
            mode="aspectFit"
          ></image>
        </view>
        <view class="text"> 在线咨询 </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import CustomHeader from "@/components/header/index.vue";
</script>

<style lang="scss" scoped>
@keyframes op {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.9;
  }
  100% {
    opacity: 1;
  }
}
.about-time {
  // height: 100%;
  .wrap {
    .header {
      background-color: #170d2e;
      .main {
        .top {
          .left {
          }
          .right {
            color: #d7bdab;
          }
        }
        .nav {
          color: #fffdf1;
          .nav-item {
          }
        }
      }
    }

    .content {
      .banner {
        animation: 1s infinite linear op;
      }
      .part {
        .main {
          width: 710rpx;
          margin: 0 20rpx;
          .jies {
            color: #ffffff;
            font-size: 30rpx;
            margin-top: 20rpx;
          }
          .add-line {
            padding-top: 30rpx;
            border-top: dashed 2rpx #dfc6b5;
          }
        }
      }
      .p1 {
        height: 630rpx;
        background: url(/src/static/image/p1-bg.jpg) no-repeat top center;
        background-size: 100% 1430rpx;
      }
      .p2 {
        height: 1050rpx;
        background: url(/src/static/image/p4-bg.jpg) no-repeat top center;
        background-size: 100% 100%;
      }
      .p7 {
        height: 540rpx;
        background: url(/src/static/image/p3-bg.jpg) no-repeat top center;
        background-size: 100% 100%;
      }
      .p8 {
        background: url(/src/static/image/p7-bg.jpg) no-repeat center;
      }
      .p9 {
        background: url(/src/static/image/p9-bg.jpg) no-repeat center;
        height: 1870rpx;
        background-size: 100% 1870rpx;
      }
      .content-4 {
        height: 490rpx;
        background-size: 100% 500rpx;
      }
      .content-5 {
        height: 610rpx;
        background-size: 100% 100%;
        .main {
          .ul {
            .li {
              height: 146rpx;
            }
            .li1 {
              width: 203rpx;
            }
            .li2 {
              width: 263rpx;
            }
            .li3 {
              width: 228rpx;
            }
          }
        }
      }
      .content-6 {
        height: 2150rpx;
        background-size: 100% 2280rpx;
        .main {
          .ul {
            .li {
              margin: 0 auto 27rpx;
              height: 200rpx;
              background: url(/src/static/image/p8-li.png) no-repeat center;
              background-size: 705rpx 200rpx;
              .h2 {
                font-size: 30rpx;
                line-height: 68rpx;
                width: 311rpx;
                color: #f7dbce;
                text-align: center;
              }
              .p {
                font-size: 30rpx;
                line-height: 50rpx;
                color: #ffffff;
                text-indent: 17rpx;
                // padding: 0.2rem 0.1rem 1rem 0.1rem;
                padding: 20rpx 10rpx 100rpx 10rpx;
              }
            }
          }
        }
      }
      .bottom {
        .biao {
          background: url(/src/static/image/p9-bg.jpg) no-repeat top center;
          background-size: 100% 1030rpx;
        }
        .diyform {
          input {
            display: block;
            width: 60%;
            height: 60rpx;
            line-height: 60rpx;
            margin: 0 auto;
            margin-bottom: 20rpx;
            border-radius: 999px;
            padding: 2rpx 0rpx;
            padding-left: 50rpx;
            outline: medium;
            background-color: #ffffff;
            border-width: 4rpx;
            border-style: inset;
            border-color: light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
            border-image: initial;
            font-size: 26rpx;
          }
          .link {
            margin: 50rpx auto;
            width: 380rpx;
            height: 62rpx;
            font-size: 30rpx;
            text-align: center;
            line-height: 64rpx;
            display: block;
            color: #fce8da;
            cursor: pointer;
            background: url(/src/static/image/link-bg2.png) no-repeat center;
            background-size: 349rpx 11rpx;
            border: 2rpx solid #b5947f;
            border-radius: 999px;
          }
        }
      }
      .title {
        background: url(/src/static/image/title-bg.png) no-repeat center 60rpx;
        background-size: 710rpx 72rpx;
        .h2 {
          font-size: 41rpx;
          line-height: 50rpx;
          text-align: center;
          font-weight: bold;
          background-image: -webkit-gradient(
            linear,
            0 0,
            0 bottom,
            from(#fde9da),
            to(#b08f79)
          );
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .p {
          margin-top: 20rpx;
          font-size: 30rpx;
          line-height: 40rpx;
          text-align: center;
          color: #feebde;
          width: 75%;
          margin-left: auto;
          margin-right: auto;
        }
      }
      .bg8 {
        background: url(/src/static/image/title-bg8.png) no-repeat center 60rpx;
        background-size: 710rpx 72rpx;
      }
      .bg7 {
        background: url(/src/static/image/title-bg7.png) no-repeat center 60rpx;
        background-size: 710rpx 72rpx;
      }
      .bg2 {
        background: url(/src/static/image/title-bg2.png) no-repeat center 60rpx;
        background-size: 710rpx 72rpx;
      }
      .bg9 {
        background: url(/src/static/image/title-b9.png) no-repeat center 60rpx;
        background-size: 710rpx 72rpx;
      }
      .none-bg {
        background: none;
      }
    }
  }
  .mobile_minchat_div {
    font-size: 20rpx;
    z-index: 1000000;
    position: fixed;
    bottom: 0rpx;
    height: 100rpx;
    width: 100%;
    display: block;
    .service {
      font-size: 1em;
      width: 100%;
      height: 100%;
      background: #3652e0;
      color: #ffffff;
      float: left;
      text-align: center;
      padding: 0 0.8em;
      line-height: 100%;
      box-sizing: border-box;
      .logo {
        width: 48rpx;
        height: 48rpx;
        font-size: 1em;
        display: block;
        position: relative;
        margin: 0.5em auto;
        .img {
        }
      }
      .text {
        font-size: 1em;
        line-height: 1em;
        height: 1em;
        width: 100%;
        display: block;
        white-space: nowrap;
      }
    }
  }
}
</style>
